<%@ page language="java" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"%>
<%@ taglib prefix="m" uri="/WEB-INF/mil.tld"%>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<!-- Meta, title, CSS, favicons, etc. -->
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
<title>起步 &middot; Bootstrap</title>
<!-- Bootstrap core CSS -->
<link href="/statics/bootstrap-3.0.0/css/bootstrap.css" rel="stylesheet">
<!-- Documentation extras -->
<link href="/statics/css/style.css" rel="stylesheet">
<link href="/statics/bootstrap-datetimepicker/css/bootstrap-datetimepicker.min.css" rel="stylesheet"/>
<!-- Favicons -->
<link rel="apple-touch-icon-precomposed" sizes="144x144"
	href="../docs-assets/ico/apple-touch-icon-144-precomposed.png">
<link rel="shortcut icon" href="../docs-assets/ico/favicon.png">
<!-- JavaScript -->
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
</head>
<body>
	<!-- Header
    ================================================== -->
	<jsp:include page="/jsp/include/header.jsp" />
	<!-- Content
    ================================================== -->
	<div class="container">
		<div class="row">
			<div class="col-md-3">
				<jsp:include page="/jsp/include/menu.jsp" />
			</div>
			<div class="col-md-9" role="main">
				<h3 class="page-header" id="download">创建价格</h3>
				<ul class="nav nav-tabs">
  					<li class="active"><a href="#tabProd" data-toggle="tab">出售中</a></li>
  					<li><a href="#tabSale" data-toggle="tab">已选择</a></li>
				</ul>
				<div class="tab-content">
					<!-- 出售中商品列表 -->
  					<div class="tab-pane active" id="tabProd">
  						<table class="table table-hover">
        					<thead>
          						<tr>
									<th><input type="checkbox" name="chk_all_max" id="chk_all_max"/></th>
            						<th>商品图片</th>
									<th>商品编码&名称</th>
									<th>商品价格</th>
									<th>商品库存</th>
									<th>备注</th>
          						</tr>
        					</thead>
        					<tbody>
        						<c:forEach items="${dp.list}" var="e">
          						<tr>
          							<td><input type="checkbox" name="chk_list_max" id="chk_list_max"/></td>
           	 						<td><img src="${e.img}" width="40" height="40"/></td>
            						<td>${e.code}<br><a href="${e.url}" target="_blank">${e.name}</a></td>
            						<td>${e.price}</td>
            						<td>${e.stock}</td>
            						<td></td>
          						</tr>
          						</c:forEach>
        					</tbody>
      					</table>
						<div id="pageProd"></div>
  					</div>
  					<!-- 价格促销商品列表 -->
  					<div class="tab-pane" id="tabSale">
  						<table class="table table-hover">
        					<thead>
          						<tr>
            						<th>商品图片</th>
									<th>商品编码&名称</th>
									<th>设置促销</th>
									<th>促销价</th>
									<th>操作</th>
          						</tr>
        					</thead>
        					<tbody>
        					</tbody>
      					</table>
						<div id="pageSale"></div>
  					</div>
				</div>
			</div>
		</div>
	</div>

	<!-- Footer
    ================================================== -->
	<jsp:include page="/jsp/include/footer.jsp" />

	<!-- JavaScript
	================================================== -->
	<script src="/statics/bootstrap-3.0.0/js/bootstrap.js"></script>
	<script src="/statics/js/application.js"></script>
	<script src="/statics/js/pagination.js"></script>
	<script src="/statics/bootstrap-datetimepicker/js/bootstrap-datetimepicker.js"></script>
	<script type="text/javascript">
	var prodMap = new Map();
	$(function() {
		//$("#pageProd").html(pageTag(${dp.pageNo},${dp.pageSize},${dp.totalRecord},getProdList));
		getProdList(1,10);
	})
	
	
	//choose商品列表
	var prodIdMap = new Map();
	function chooseProd(id) {
		if(prodIdMap.containsKey(id))
			prodIdMap.remove(id);
		else
			prodIdMap.put(id,id);
		getSaleList(1,10);
	}
	
	
	//查询商品列表
	function getProdList(pageNo, pageSize) {
		var href = "/prod/getProdList.do";
		$.getJSON(href, {"pageNo":pageNo,"pageSize":pageSize}, function (data) {
			if(data.ret == 0){
				var _html;
				$("#tabProd table tbody tr").remove();
				for (index in data.data.list){
					elemObj = data.data.list[index];
					_html = "<tr>"+
				 				"<td><input type=\"checkbox\" id=\"chk_list_max\" name=\"chk_list_max\" value=\""+elemObj.id+"\" onClick=\"chooseProd("+elemObj.id+")\"/></td>"+
							 	"<td><img src=\""+elemObj.img+"\" width=\"40\" height=\"40\"/></td>"+
							 	"<td>"+elemObj.code+"<br><a href=\""+elemObj.url+"\" target=\"_blank\">"+elemObj.name+"</a></td>"+
							 	"<td>"+elemObj.price+"</td>"+
							 	"<td>"+elemObj.stock+"</td>"+
							 	"<td></td>"+
							"</tr>";
					$("#tabProd table tbody").append(_html);
					
					if(!prodMap.containsKey(elemObj.id)) prodMap.put(elemObj.id,elemObj);
				}
				$("#pageProd").html(pageTag(data.data.pageNo,data.data.pageSize,data.data.totalRecord,getProdList));
			}
		});
	}
	
	
	//查询已选价格列表
	function getSaleList(pageNo, pageSize) {
		var start = (pageNo-1)*pageSize;
		var end   = pageNo*pageSize<prodIdMap.size()?pageNo*pageSize:prodIdMap.size();
		var _html;
		$("#tabSale table tbody tr").remove();
		for(start;start<end;start++){
			elemObj = prodMap.get(prodIdMap.keys()[start]);
			_html = "<tr>"+
		 				"<td><img src=\""+elemObj.img+"\" width=\"60\" height=\"60\"/></td>"+
		 				"<td>"+elemObj.code+"<br><a href=\""+elemObj.url+"\" target=\"_blank\">"+elemObj.name+"</a><br>原价:"+elemObj.price+"</td>"+
		 				"<td>打<input type=\"text\" value=\"10\" size=\"2\">折 减<input type=\"text\" value=\"0\" size=\"2\">元</td>"+
		 				"<td>"+elemObj.price+"</td>"+
		 				"<td></td>"+
					"</tr>";
			$("#tabSale table tbody").append(_html);
		}
		$("#pageSale").html(pageTag(pageNo,pageSize,prodIdMap.size(),getSaleList));
	}
	</script>
	<!-- https://wrapbootstrap.com/themes/page.1/sort.rank/order.asc?branch=3.x -->
</body>
</html>